<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<div>
				你最喜欢的旅游景点
			</div>
			<select id="city">
				<optgroup label="河南">
					<option value="中国文字博物馆">中国文字博物馆</option>
					<option value="黄河风景名胜区">黄河风景名胜区</option>
					<option value="中原影视城">中原影视城</option>
					<option value="绿博园">绿博园</option>
				</optgroup>
				<optgroup label="上海">
					<option value="外滩">外滩</option>
					<option value="金山沙滩">金山沙滩</option>
					<option value="枫泾古镇">枫泾古镇</option>
					<option value="上海影视城">上海影视城</option>
				</optgroup>
				<optgroup label="杭州">
					<option value="西湖">西湖</option>
					<option value="雷锋塔">雷锋塔</option>
					<option value="灵隐寺">灵隐寺</option>
					<option value="浙大">浙大</option>
				</optgroup>
				<optgroup label="北京">
					<option value="天安门">天安门</option>
					<option value="故宫">故宫</option>
					<option value="长城">长城</option>
					<option value="圆明园">圆明园</option>
				</optgroup>
			</select>
			<button type="button" onclick="fn5()">获取选中的</button>
			<button type="button" onclick="fn55()">设置选中项</button>
		</div>
		<br />
		<br />
		<div>
			<div>
				你最喜欢的书(多选)
			</div>
			<select id="book" multiple size="2">
				<option value="a1">活着</option>
				<option value="a2">遥远的救世主</option>
				<option value="a3">洗冤录</option>
				<option value="a4">云边的小卖铺</option>
				<option value="a5">犯罪心理</option>
				<option value="a6">十宗罪</option>
				<option value="a8">嫌疑人X的献身</option>
				<option value="a9">小王子</option>
				<option value="a10">悟空传</option>
			</select>
			<button type="button" onclick="fn6()">获取选中的</button>
			<button type="button" onclick="fn66()">设置选中项</button>
		</div>
		<br />
		<br />
		<div>
			<div>
				你最喜欢的景点(多选)
			</div>
			<select id="city1" multiple size="5">
				<optgroup label="河南">
					<option value="a1">中国文字博物馆</option>
					<option value="a2">黄河风景名胜区</option>
					<option value="a3">中原影视城</option>
					<option value="a4">绿博园</option>
				</optgroup>
				<optgroup label="上海">
					<option value="b1">外滩</option>
					<option value="b2">金山沙滩</option>
					<option value="b3">枫泾古镇</option>
					<option value="b4">上海影视城</option>
				</optgroup>
				<optgroup label="杭州">
					<option value="c1">西湖</option>
					<option value="c2">雷锋塔</option>
					<option value="c3">灵隐寺</option>
					<option value="c4">浙大</option>
				</optgroup>
				<optgroup label="北京">
					<option value="d1">天安门</option>
					<option value="d2">故宫</option>
					<option value="d3">长城</option>
					<option value="d4">圆明园</option>
				</optgroup>
			</select>
			<button type="button" onclick="fn7()">获取选中的</button>
			<button type="button" onclick="fn77()">设置选中项</button>
		</div>
		<div>
			<h2>文件上传</h2>
			<div>
				上传文件:<input type="file" id="file1" />
				<button type="button" onclick="fn8()">获取要上传的文件信息</button>
				<br />
				<br />
				批量上传文件:<input type="file" id="file2" multiple />
				<button type="button" onclick="fn9()">获取要上传的所有文件信息</button>
			</div>
		</div>



		<script type="text/javascript">
			//获取下拉列表选中项的数据
			function fn5() {
				var city= document.getElementById("city");
				// console.dir(foods2);
				var cityV = city.value;
				console.log("你选中的景点:", cityV);
			}

			//设置下拉列表的选中项
			function fn55() {
				var city = document.getElementById("city");
				city.value = "西湖";
			}

			//获取下拉列表选中项的值(多选)
			function fn6() {
				var book = document.getElementById("book");
				console.dir(book);

				var selectedOptions = book.selectedOptions; //选中的所有选项(数组)

				console.log("selectedOptions:", selectedOptions);

				var bookArr = []; //存放选中选项
				for (var i = 0; i < selectedOptions.length; i++) {
					bookArr.push(selectedOptions[i].value);
				}

				console.log("你选中了", bookArr);
			}
			//设置下拉列表选中项
			function fn66() {
				var book = document.getElementById("book");
				book[0].selected = true;
				book[2].selected = true;
				book[4].selected = true;
			}

			//获取下拉列表选中项的值(多选)
			function fn7() {
				var city1 = document.getElementById("city1");
				console.dir(city1);
				var selectedOptions = city1.selectedOptions; //选中的所有选项(数组)
				console.log("selectedOptions:", selectedOptions);

				var city1Arr = [];
				for (var i = 0; i < selectedOptions.length; i++) {
					city1Arr.push(selectedOptions[i].value);
				}

				console.log("你选中了", city1Arr);
			}
			//设置下拉列表选中的值
			function fn77() {
				var city1 = document.getElementById("city1");
				city1[0].selected = true;
				city1[6].selected = true;
				city1[12].selected = true;
			}






			//获取多个上传文件 的信息
			function fn9() {
				var file2 = document.getElementById("file2");
				//console.dir(file2);
				var files = file2.files;
				// console.log("2files:",files);
				var filesArr = [];
				for (var i = 0; i < files.length; i++) {
					var obj = {
						lastModifiedDate: files[i].lastModifiedDate,
						fileName: files[i].name,
						fileType: files[i].type,
						fileSize: parseInt(files[i].size / 1024)
					}
					// console.log("obj:",obj);
					filesArr.push(obj);
				}
				console.log("你上传的所有文件信息", filesArr);
			}

			//获取单个上传文件 的信息
			function fn8() {
				var file1 = document.getElementById("file1");
				console.dir(file1);
				var files = file1.files;
				console.log("1files:", files);
				var lastModifiedDate = files[0].lastModifiedDate;
				console.log("最近修改时间 lastModifiedDate:", lastModifiedDate);

				var fileName = files[0].name;
				console.log("文件名称 fileName:", fileName);

				var fileType = files[0].type;
				console.log("文件类型 fileType:", fileType);

				var fileSize = parseInt(files[0].size / 1024);

				console.log("文件名称 fileSize:", fileSize, " kb");


				// var time=files[0].
			}
		</script>
	</body>
</html>
